<template>
    <div>
        <el-form
            :inline="true"
            :model="lecture_query"
            class="demo-form-inline"
        >
            <el-form-item label="ID">
                <el-input
                    v-model="lecture_query.id"
                    placeholder="请输入ID"
                    clearable
                />
            </el-form-item>
            <el-form-item label="课程名">
                <el-input
                    v-model="lecture_query.name"
                    placeholder="请输入课程名"
                    clearable
                />
            </el-form-item>
            <el-form-item label="上课地点">
                <el-input
                    v-model="lecture_query.place"
                    placeholder="请输入地点名"
                    clearable
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onQuery"
                >查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    @click="onReload"
                >重置</el-button>
            </el-form-item>
        </el-form>

        <el-divider content-position="left">未发布通知的课程</el-divider>
        <el-table
            :data="unhandledDataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="课程名"
                prop="lectureName"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleDetail(scope.$index, scope.row)"
                    >详情</el-button>
                    <el-button
                        size="small"
                        @click="handleUpdate(scope.$index, scope.row)"
                    >修改课程</el-button>
                    <el-button
                        size="small"
                        @click="handlePublish(scope.$index, scope.row)"
                    >发布课程</el-button>
                    <el-popconfirm
                        title="确认删除?"
                        @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                                size="small"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="unhandledCurrentChange"
            @size-change="unhandledSizeChange"
            background
            layout="prev, pager, next"
            :total="unhandledData.selectData.count"
            :default-page-size="unhandledData.selectData.pagesize"
        />

        <br>
        <el-divider content-position="left">已发布通知的课程</el-divider>
        <el-table
            :data="handledDataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="课程名"
                prop="lectureName"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleDetail(scope.$index, scope.row)"
                    >详情</el-button>
                    <el-button
                        size="small"
                        @click="handleUpdate(scope.$index, scope.row)"
                    >修改课程</el-button>
                    <el-button
                        size="small"
                        @click="handlePublish(scope.$index, scope.row)"
                    >发布上课通知</el-button>
                    <el-popconfirm
                        title="确认删除?"
                        @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                                size="small"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="handledCurrentChange"
            @size-change="handledSizeChange"
            background
            layout="prev, pager, next"
            :total="handledData.selectData.count"
            :default-page-size="handledData.selectData.pagesize"
        />
    </div>

    <el-dialog
        v-model="dialogFormVisible"
        :title="curRow?.lectureName"
        align-center
    >
        <el-form
            ref="LectureForm"
            :model="Lecture"
            :rules="LectureRules"
        >
            <el-form-item
                label="课程时间"
                prop="lectureTime"
            >
                <el-date-picker
                    v-model="Lecture.lectureTime"
                    type="datetime"
                    placeholder="Select date and time"
                />
            </el-form-item>
            <el-form-item
                label="课程地点"
                prop="lecturePlace"
            >
                <el-input
                    v-model="Lecture.lecturePlace"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="课程内容"
                prop="lectureContent"
            >
                <el-input
                    v-model="Lecture.lectureContent"
                    autocomplete="off"
                    type="textarea"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="onSubmit('LectureForm')"
                >
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog
        v-model="dialogDetailVisible"
        title="课程详情"
        align-center
    >
        <el-descriptions :column="1">
            <el-descriptions-item label="课程名">
                {{ curRow?.lectureName }}
            </el-descriptions-item>

            <el-descriptions-item label="教师">
                {{ curRow?.teacherId }}
            </el-descriptions-item>

            <el-descriptions-item label="课程时间">
                {{ curRow?.lectureTime }}
            </el-descriptions-item>

            <el-descriptions-item label="课程地点">
                {{ curRow?.lecturePlace }}
            </el-descriptions-item>

            <el-descriptions-item label="课程内容">
                {{ curRow?.lectureContent }}
            </el-descriptions-item>

        </el-descriptions>

    </el-dialog>
</template>

<script lang="ts">
import {
    getCurrentInstance, inject, reactive,
    onMounted, computed, ref
} from "vue";
import { Lecture, LectureRules, lecture_query, LectureData, LectureListData } from "@/utils/staff_LectureValidators"
import { ElMessage } from 'element-plus'
export default {
    setup() {
        const dialogFormVisible = ref(false);
        const dialogDetailVisible = ref(false);
        //@ts-ignore
        const { ctx } = getCurrentInstance();
        const axios = inject('axios');
        const data = reactive(new LectureListData());
        const handledData = reactive(new LectureListData());
        const unhandledData = reactive(new LectureListData());
        const curRow = ref<LectureData>();

        onMounted(() => {
            getLectureData();
        });

        const getLectureData = () => {
            //@ts-ignore
            axios.get("/api/lecture/queryList",
                {
                    params: {
                        deleted: false,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200) {
                        data.LectureList = res.data.data;
                        data.selectData.count = res.data.data.length;

                        handledData.LectureList = data.LectureList.filter(item => item.isNotificated === true);
                        unhandledData.LectureList = data.LectureList.filter(item => item.isNotificated === false);
                        handledData.selectData.count = handledData.LectureList.length;
                        unhandledData.selectData.count = unhandledData.LectureList.length;

                    } else {
                        alert("未请求到\"课程\"信息");
                    }
                });
        };

        const unhandledDataList = reactive({
            comList: computed(() => {
                return unhandledData.LectureList.slice(
                    (unhandledData.selectData.page - 1) * unhandledData.selectData.pagesize,
                    unhandledData.selectData.page * unhandledData.selectData.pagesize
                );
            }),
        });

        const handledDataList = reactive({
            comList: computed(() => {
                return handledData.LectureList.slice(
                    (handledData.selectData.page - 1) * handledData.selectData.pagesize,
                    handledData.selectData.page * handledData.selectData.pagesize
                );
            }),
        });

        const unhandledCurrentChange = (page: number) => {
            unhandledData.selectData.page = page;
        };
        const unhandledSizeChange = (pagesize: number) => {
            unhandledData.selectData.pagesize = pagesize;
        };

        const handledCurrentChange = (page: number) => {
            handledData.selectData.page = page;
        };
        const handledSizeChange = (pagesize: number) => {
            handledData.selectData.pagesize = pagesize;
        };

        const handleDetail = (index: number, row: LectureData) => {
            console.log(index, row);
            dialogDetailVisible.value = true;
            curRow.value = row;
        }
        const handleDelete = (index: number, row: LectureData) => {
            //@ts-ignore
            axios.get("/api/lecture/delete",
                {
                    params: {
                        id: row.id,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        ElMessage({
                            message: '成功删除',
                            type: 'success',
                        })
                        location.reload();
                    } else {
                        alert("未请求到\"培训申请\"信息")
                    }
                });
        }
        const handlePublish = (index: number, row: LectureData) => {
            ElMessage({
                message: '发布成功',
                type: 'success',
            })
        }
        const handleUpdate = (index: number, row: LectureData) => {
            console.log(index, row);
            dialogFormVisible.value = true;
            curRow.value = row;
            //@ts-ignore
            Lecture.value = {
                lectureContent: curRow.value.lectureContent,
                lecturePlace: curRow.value.lecturePlace,
                lectureTime: curRow.value.lectureTime,
            };
        }

        interface QParams {
            deleted: boolean;
            id?: string;
            lectureName?: string;
            lecturePlace?: string;
        }

        const onQuery = () => {
            const { id, name, place } = lecture_query;
            let q_params: QParams = { deleted: false };
            var allowQuery = false;
            if (id != "" && /^[0-9]*$/.test(id)) {
                q_params.id = id;
                allowQuery = true;
            }
            if (name != "") {
                q_params.lectureName = name;
                allowQuery = true;
            }
            if (place != "") {
                q_params.lectureName = place;
                allowQuery = true;
            }
            if (allowQuery) {
                //@ts-ignore
                axios.get("/api/lecture/queryList",
                    {
                        params: q_params
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200) {
                            data.LectureList = res.data.data;
                            data.selectData.count = res.data.data.length;

                            handledData.LectureList = data.LectureList.filter(item => item.isNotificated === true);
                            unhandledData.LectureList = data.LectureList.filter(item => item.isNotificated === false);
                            handledData.selectData.count = handledData.LectureList.length;
                            unhandledData.selectData.count = unhandledData.LectureList.length;

                        } else {
                            alert("未请求到\"课程\"信息");
                        }
                    });
            }
        };

        const onSubmit = (formName: any) => {
            ctx.$refs[formName].validate((valid: boolean) => {
                if (valid) {
                    //@ts-ignore
                    axios.post("/api/lecture/update", {
                        "id": curRow.value?.id,
                        "lectureContent": Lecture.value.lectureContent,
                        "lectureName": curRow.value?.lectureName,
                        "lecturePlace": Lecture.value.lecturePlace,
                        "lectureTime": Lecture.value.lectureTime,
                        "teacherId": curRow.value?.teacherId,
                    }, {
                        headers: { 'Content-Type': 'application/json' }
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200 && res.data.success === true) {
                            console.log(res);
                            dialogFormVisible.value = false;
                            location.reload();
                        }
                        else {
                            alert("提交失败！");
                            return false;
                        }
                    })
                } else {
                    alert("表单校验不通过，提交失败!");
                    return false;
                }
            })
            dialogFormVisible.value = false;
        };

        const onReload = () => {
            location.reload();
        }

        return {
            handledData, unhandledData, onQuery, lecture_query, handledDataList, unhandledDataList,
            handledCurrentChange, unhandledCurrentChange, handledSizeChange, unhandledSizeChange,
            handleDelete, handleDetail, handlePublish, handleUpdate, dialogDetailVisible, curRow,
            dialogFormVisible, Lecture, LectureRules, onSubmit, onReload,
        }
    },
};
</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
